<template>
	<view class="base-evaluate">
		<view class="item">
			<u-avatar :src="evaluateInfo.avatar" size="64" mode="aspectFit"></u-avatar>
			<view class="info">
				<view class="user">
					<text class="name">{{ evaluateInfo.name }}</text>
					<u-rate size="24" active-color="#ffc30f" :current="evaluateInfo.score" disabled></u-rate>
				</view>
				<view class="time">{{ evaluateInfo.time }}</view>
				<view class="body">
					{{ evaluateInfo.content }}
				</view>
				<view class="media" v-if="evaluateInfo.media">
					<u-image width="174" height="174" v-for="(item, index) in evaluateInfo.media"
						:key="index"></u-image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		reactive,
		toRefs,
		inject,
	} from 'vue';

	defineOptions({
		name: 'goods-evaluate'
	});

	const props = defineProps({
		evaluateInfo: {
			type: Object,
			default: {},
		},
	})
</script>

<style lang="scss" scoped>
	.base-evaluate {
		padding: 0 $m24;

		.item {
			@include f-between;
			align-items: flex-start;
			padding: $m24 0;
			border-bottom: 1px solid $u-border-color;

			&:last-child {
				border-bottom: none;
			}

			.info {
				flex: 1;
				margin-left: $m24;

				.user {
					.name {
						font-size: $font-24;
						font-weight: bold;
						color: $u-main-color;
					}
				}

				.time {
					font-size: $font-24;
					color: $u-tips-color;
				}

				.body {
					margin: $m16 0;
					line-height: 1.3;
				}

				.media {
					display: flex;

					.u-image {
						margin-right: $m20;

						&:nth-child(3n) {
							margin-right: 0;
						}
					}
				}
			}
		}
	}
</style>